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Question 1 [30 marks] 
Pasted below are the lines from the request and response in a WebSocket handshake. 


(1) 
(2) 
(3) 
(4) 
(5) 
(6) 


GET /chat HTTP/1.1 

Host: server.example.com 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25j2Z0== 
Origin: http://example.com 


(7) Sec-WebSocket-—Protocol: chat, superchat 
(8) Sec-WebSocket-Version: 13 


(9) HTTP/1.1 101 Switching Protocols 

(10) Upgrade: websocket 

(11) Connection: Upgrade 

(12) Sec-WebSocket-—Accept: s3pPLMBiTxaQ9kYGzzhZRbK+x0o0= 
(13) Sec-WebSocket-Protocol: chat 


a) 


b) 


Cc) 


d) 


g) 


h) 


Line (1) follows the format of an HTTP Request-Line. What are its three parts and what do 
they mean? [3 marks] 


Line (9) follows the format of an HTTP Status-Line. What are its three parts and what do they 
mean? [3 marks] 


Explain the meaning of the following lines: 


i. Line (2) [3 marks] 
ii. Line (6) [3 marks] 
Suggest two characteristics about the subsequent traffic over this TCP connection that will be 
different from HTTP traffic. [6 marks] 
How is line (12) generated, and what information is used in its generation? [3 marks] 
What is a heartbeat and why is it used in WebSockets? [3 marks] 
How should a WebSocket be closed, and why is this different from closing a TCP connection? 
[3 marks] 
What does the WebSocket protocol suggest about the default port that is used for websocket 


communication? [3 marks] 
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Question 2 [30 marks] 
You are part of a team designing a real-time anonymous voting room that will be implemented using 
HTTP, WebSockets, Play Framework and React.js. 


A user makes a request to the server, which creates a new voting room. This creates a unique URL to 
the room, which the user can (externally to the app) send to whoever should connect. The room 
operates like a real-time chat room, except that at any time anyone in the room can propose a motion 
to vote on. At this point, chat messages are paused, and all users in the room are asked to vote on the 
motion. When all users in the room have voted (or one minute has passed) the results are displayed to 
all users, and chat resumes. 


a) Design a web API for your application. For each request path, describe the method, path, any 
URL or query parameters, what a successful response from the server would be, and any 
special characteristics of that request path (for example, if it is a WebSockets path) 


For example: 


GET /?title={ title} 

Creates a new voting room with the given title. The room is created on the server, ready to 
accept connections. The server responds with a 302 Redirect to the URL of the newly created 
room (in the Location header), prompting the client to make a connection to the room. 


[10 marks] 


b) Design the message API (for the messages that would be sent over WebSockets) for this 
application. Use JSON for the format, and give an example of each message. 


[10 marks] 
c) Identify the main React.js components you will need to create in order to implement this app. 


For each component, give it a name, describe what data it acts upon, and an example of the 
HTML it would produce. (You may use JSX notation for the template, but syntax need not be 


precise) 
[10 marks] 
Question 3 [20 marks] 
a) Briefly explain the following Web security threats: 
i. Cross-site scripting [5 marks] 
li. SQL injection attacks [5 marks] 
ili. Session hijacking [5 marks] 


b) Describe two parameters that can be set on a Set-Cookie response header value to enhance the 
cookie’s security. For each parameter, explain how it improves the cookie’s security. 
[5 marks] 
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Question 4 [20 marks] 


a) Single Page Applications (SPAs) dynamically update the browser’s Document Object Model 
(DOM) as the user interacts with the page. React.js components only describe how to generate 
HTML representing their state, not what manipulations to make to the DOM as the program’s 
state changes. How does the React.js framework manage the state of the DOM to enable this? 

[5 marks] 


b) The build system for an SPA concatenates and minifies the JavaScript code. How do these two 
steps significantly improve the loading behaviour of the application, and what is minification? 
[5 marks] 


c) What is a source map, what is it produced by, and how is it useful for debugging client code in 
an SPA? [4 marks] 


d) A server makes a POST request to an API returning JSON data from a different server than the 
Origin. What sequence of HTTP requests, and which response headers for Cross-Origin 


Resource Sharing (CORS), are required for a modern browser to perform this request and 
provide access to the JSON response to the JavaScript code? [6 marks] 


Question 5 [20 marks] 


Briefly discuss the advantages and disadvantages of each of the following schemes, for a client/server 
application communicating over TCP. When might each approach be preferred, and why? 


a) A RESTful HTTP API, with separate request paths and HTTP methods for each of the major 
calls, returning JSON data. [7 marks] 


b) A Web services API using XML end-points. [7 marks] 


c) A messaging-style API in which simple classes are serialized, sent over the TCP connection, 
de-serialized at the other end. [6 marks] 
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